# Notifications

Umo Editor uses [TDesign Vue Next](https://tdesign.tencent.com/vue-next/overview-en) as its base component library. To simplify usage for developers, it provides encapsulated methods for common notification components such as Alert, Confirm, and Message. You can visit [https://www.umodoc.com/en/demo?pane=events](https://www.umodoc.com/en/demo?pane=events) and click the corresponding buttons to view examples.

## Example
```vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="useAlert">useAlert</button>
  <button @click="useConfirm">useConfirm</button>
  <button @click="useMessage">useMessage</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const options = ref({
    // Configuration options
    // ...
  })

  // Use Alert
  const useAlert = () => {
    editorRef.value.useAlert({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
    })
  }

  // Use Confirm
  const useConfirm = () => {
    const confirm = editorRef.value.useConfirm({
      theme: 'success',
      header: 'Info',
      body: 'Hello World',
      onConfirm() {
        confirm.destroy()
      },
    })
  }

  // Use Message
  const useMessage = () => {
    editorRef.value.useMessage('info', {content: 'Hello World'})
  }
</script>
```

## Component Usage Instructions

### useAlert

The Alert dialog component. For detailed instructions, see [Methods List](./methods#usealert).

### useConfirm

The Confirm dialog component. For detailed instructions, see [Methods List](./methods#useconfirm).

### useMessage

The Message component. For detailed instructions, see [Methods List](./methods#usemessage).